<template>
  <div 
    v-show="LoginOrResign"
  >
      <div id="LoginsBox">
            <div id="title">
                <span>登录</span>
            </div>
            <div id="loginName">
                <div class="icon">
                    <img src="../../assets/LoginAndResign/icon_zh.png" alt="">
                </div>
                <div class="login">
                    <input type="text" name="" id="" placeholder="请输入用户名或账号" ref="account">
                </div>
            </div>
            <div id="loginPassword">
                <div class="icon">
                    <img src="../../assets/LoginAndResign/icon_mm.png" alt="">
                </div>
                <div class="login">
                    <input :type="passCanBeSee?'text':'password'" name="" id="PW1" placeholder="请输入密码" ref="password">
                </div>
                <div class="kejian" @click="passCanBeSee = !passCanBeSee">
                    <img src="../../assets/LoginAndResign/icon_xsmm.png" alt="" data-kejian="0" class="kejianImg" v-show="passCanBeSee">
                    <img src="../../assets/LoginAndResign/icon_ycmm.png" alt="" data-kejian="0" class="kejianImg" v-show="!passCanBeSee">
                </div>
            </div> 
            <div class="btnForRemberPW">
                <input type="checkbox" @click="RemberPW = !RemberPW" :checked="RemberPW" name="" id="repassword" ref="repassword"><span class="repassword">记住密码</span>
            </div>
            <div id="toResign" @click="toResign()">
                <span>注册</span>
            </div>
    </div>
    <div id="button" @click="Login">
        <span>登录</span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Message,Loading } from 'element-ui'
export default {
    name:'Login',
    data() {
        return {
            isDark:false,
            passCanBeSee:false,
            RemberPW:false,
        }
    },
    mounted(){
        this.$bus.$on('DarkOrLight',(data)=>{
            this.isDark = data
        })
        if(this.getLocalAP()){
            const array = this.getLocalAP()
            this.$refs.account.value = array[0];
            this.$refs.password.value = array[1];
            this.RemberPW = true
        }
    },
    computed:{
        ...mapState(['LoginOrResign']),
    },
    methods: {
        toResign(){
            this.$store.commit('LoginOrResign',false)
        },
        Login(){
            let account = this.$refs.account.value;
            let password = this.$refs.password.value;
            let data = {
                account,
                password
            }
            let loadingInstance = Loading.service({ fullscreen: true });
            //console.log(data)
            this.$axios.get("https://qc3atp.api.cloudendpoint.cn/Login",{params:data})
            .then(res=>{
                //console.log(res)
                let storage = window.localStorage
                this.$bus .$emit('closeLoginOrResign',false)
                this.$bus .$emit('successLogin',true)
                this.isRemberPW()
                storage.setItem('token',res.data.token)
            }).then(()=>{
                Message({
                    showClose: true,
                    message: '登录成功',
                    type: 'success'
                });
                loadingInstance.close();
            }).catch(err=>{
                console.log(err)
                Message({
                    showClose: true,
                    message: '账户或密码错误',
                    type: 'error'
                });
                loadingInstance.close();
            })
        },
        isRemberPW(){
            //console.log(this.RemberPW)
            const storage = window.localStorage;
            if(this.RemberPW){
                storage.setItem('a',this.$refs.account.value)
                storage.setItem('p',this.$refs.password.value)
            }else{
                storage.removeItem('a')
                storage.removeItem('p')
            }
        },
        getLocalAP(){
            const storage = window.localStorage;
            if(storage.getItem('a')&&storage.getItem('p')){
                let array = [storage.getItem('a'),storage.getItem('p')]
                return array
            }else{
                return false
            }
        }
    },
}
</script>

<style scoped lang="css">
    #LoginOrResgin{
        position: relative;
    }
    #title{
        font-size: 18px;
        font-weight: 600;
        margin: 20px 10px ;
    }
    #LoginsBox,#ResignBox{
        width: 90%;
        height: 100%;
        margin: 0 auto;
    }
    #loginName,#loginPassword{
        width: 100%;
        height: 60px;
        margin: 20px auto;
        background:rgba(153, 153, 153, 0.466) ;
        border-radius: 10px;
        position: relative;
    }
    .icon{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 25px;
    }
    .kejian{
        right: 25px!important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .login{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .login input{
        width: 60%;
        height: 55%;
        background-color: transparent;
        border: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        left: 50%;
    }
    #repassword{
        width: 20px;
        height: 20px;
        margin: 0 5px 0 5px;
        background: url(../../assets/LoginAndResign/icon_nor.png) no-repeat center;
        background-size: 100% 100%;
        outline: none;
        appearance: none;  
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    #repassword:checked{
        background: url(../../assets/LoginAndResign/icon_sel.png) no-repeat center;
    }
    .repassword{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display:inline-block;
        left: 30px;
        font-size: 12px;
    }
    .btnForRemberPW{
        height: 30px;
        position: relative;
        width: 85%;
        float: left;
    }
    #toResign,#toLogin{
        float: left;
        height: 30px;
        cursor: pointer;
    }
    #toResign span,#toLogin span{
        line-height: 30px;
        font-size: 12px;
    }
    .dark{
        color: #fff!important;
    }
    #button{
        width: 68%;
        height: 40px;
        position: absolute;
        transform:  translateX(-50%);
        left: 50%;
        bottom: -100px;
        border-radius: 10px;
        text-align: center;
        line-height: 40px;
        background: rgba(153, 153, 153, 0.466);
        font-size: 16px;
    }
</style>